<template>  
   <div>
      <h3>欢迎光临 vue 开发的收银系统--水果店</h3>
      <table class="tb">       
          <th>苹果 10 ￥ / 斤, 折扣《8折》 </th>
          <tr>请输入您购买的斤数
                <input type="text" v-model="msg">
          </tr>
            <tr><button @click="btn">结账买单</button></tr>
            <tr>结账单： 总价 {{money}} ￥ 元 折后价： {{zhe}} ￥ 元 省了： {{shen}} ￥元</tr>
      </table>
  </div>
</template>

<script>
export default {
    data() {
       return {
           msg: '',
           money: '',
           zhe: '',
           shen: '',
       }
    },
    methods: {
       btn() {
           this.money = this.msg * 10,
           this.zhe = this.msg * 10 * 0.8,
           this.shen = this.msg * 10 - this.msg * 10 * 0.8
       }
    }
}
</script>

<style>
table {
  border-collapse: collapse;
  width: 700px;
  margin: 0 auto;
}

table, th, tr {
  border: 1px solid black;
}

th,tr{
  text-align: center;
}

th, tr {
  height: 30px;
};

h3{
  text-align: center;
}


</style>